<script setup lang='ts'>
import Logo from '@/components/Logo.vue';
import Lang from '@/components/Lang.vue';
import Summary from '@/components/CN/Summary.vue';
import Part1 from '@/components/CN/Part1.vue';
import Part2 from '@/components/CN/Part2.vue';
import Part3 from '@/components/CN/Part3.vue';
import Part4 from '@/components/CN/Part4.vue';
import Part5 from '@/components/CN/Part5.vue';
import Part6 from '@/components/CN/Part6.vue';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute()

const overview_id = Number(route.query.id)

const itemIndex = ref(0);
const bgimg = ref(new URL('../../assets/img/orderbg.jpg', import.meta.url).href)
const defHeight = document.documentElement.clientHeight - 166
let page = ref(1) // 第6项的默认页码
// tab切换
const tabClick = (index) => {
    itemIndex.value = index;
    if (index == 5) {
        page.value = 1
    }
}

let part2Refs = ref(null)

watch(itemIndex, (newVal) => {
    newVal == 0 || newVal == 1 ? bgimg.value = new URL('../../assets/img/orderbg.jpg', import.meta.url).href : bgimg.value = new URL('../../assets/img/detailbg.jpg', import.meta.url).href
    if (newVal == 2) {
        // 调用子组件绘制饼图方法
        part2Refs.value.drawPie()
    }
    // 滚动到顶部
    detailbox.value.scrollTop = 0
})

const detailbox = ref(null)

// 点击目录
const toDetail = (index) => {
    itemIndex.value = index;
}

// 下一页
const toNextPage = () => {
    page.value = 2
    // 滚动到顶部
    detailbox.value.scrollTop = 0
}
// 上一页
const toPrePage = () => {
    page.value = 1
    // 滚动到顶部
    detailbox.value.scrollTop = 0
}

</script>
<template>
    <div class="detailbox box" ref="detailbox">
        <Logo />
        <div class="detail_container"
            :style="{ background: 'url(' + bgimg + ') no-repeat top center', backgroundSize: 'cover', minHeight: defHeight < 1343 ? '1343px' : 'calc(100% - 166px)' }">
            <!-- 语言 -->
            <div class="langbox">
                <Lang />
                <img src="@/assets/img/btn_list.png" class="btn_list" @click="$router.replace('/cn/list')" />
            </div>
            <div class="tabbox">
                <div class="tab">
                    <ul>
                        <li :class="{ active: itemIndex == 0 }" @click="tabClick(0)">目录</li>
                        <li :class="{ active: itemIndex == 1 }" @click="tabClick(1)">
                            1
                        </li>
                        <li :class="{ active: itemIndex == 2 }" @click="tabClick(2)">
                            2
                        </li>
                        <li :class="{ active: itemIndex == 3 }" @click="tabClick(3)">
                            3
                        </li>
                        <li :class="{ active: itemIndex == 4 }" @click="tabClick(4)">
                            4
                        </li>
                        <li :class="{ active: itemIndex == 5 }" @click="tabClick(5)">
                            5
                        </li>
                        <li :class="{ active: itemIndex == 6 }" @click="tabClick(6)">
                            6
                        </li>
                    </ul>
                </div>
                <div class="tabcontainer">
                    <div class="ctitem ctitem0" v-show="itemIndex == 0">
                        <div class="itemtitlebox">
                            <p class="itemtitle">目录</p>
                        </div>
                        <Summary @change="toDetail" />
                    </div>
                    <div class="ctitem ctitem1" v-show="itemIndex == 1">
                        <div class="itemtitlebox">
                            <p class="itemtitle">审线小结</p>
                        </div>
                        <Part1 :overview_id="overview_id" />
                        <button type="button" class="btn_detail btnani" @click="itemIndex = 2">点击查看详情</button>
                    </div>
                    <div class="ctitem ctitem2" v-show="itemIndex == 2">
                        <div class="itemtitlebox">
                            <p class="itemtitle">基本情况</p>
                        </div>
                        <Part2 ref="part2Refs" :overview_id="overview_id" />
                    </div>
                    <div class="ctitem ctitem3" v-show="itemIndex == 3">
                        <div class="itemtitlebox">
                            <p class="itemtitle">产线基本设置</p>
                        </div>
                        <Part3 :overview_id="overview_id" />
                    </div>
                    <div class="ctitem ctitem4" v-show="itemIndex == 4">
                        <div class="itemtitlebox">
                            <p class="itemtitle">产线调整建议</p>
                        </div>
                        <Part4 :overview_id="overview_id" />
                    </div>
                    <div class="ctitem ctitem5" v-show="itemIndex == 5">
                        <div class="itemtitlebox">
                            <p class="itemtitle">产品推荐</p>
                        </div>
                        <Part5 :overview_id="overview_id" />
                    </div>
                    <div class="ctitem ctitem6" v-show="itemIndex == 6">
                        <div class="itemtitlebox">
                            <p class="itemtitle">工艺维护建议</p>
                        </div>
                        <Part6 :page="page" :overview_id="overview_id" />
                    </div>
                </div>
                <div class="tabfoot">
                    <img src="@/assets/img/orderfoot.png" />
                </div>
                <button type="button" class="btn_detail btn_ctitem2 btnani" v-if="itemIndex == 2"
                    @click="itemIndex = 3">下一项</button>
                <button type="button" class="btn_detail btn_ctitem3 btnani" v-if="itemIndex == 3"
                    @click="itemIndex = 4">下一项</button>
                <button type="button" class="btn_detail btn_ctitem4 btnani" v-if="itemIndex == 4"
                    @click="itemIndex = 5">下一项</button>
                <button type="button" class="btn_detail btn_ctitem5 btnani" v-if="itemIndex == 5"
                    @click="itemIndex = 6">下一项</button>
                <button type="button" class="btn_detail btn_ctitem5 btnani" v-if="itemIndex == 6 && page == 1"
                    @click="toNextPage">下一项</button>
                <button type="button" class="btn_detail btn_ctitem5 btnani" v-if="itemIndex == 6 && page == 2"
                    @click="toPrePage">上一项</button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.detailbox {
    overflow-y: scroll;
    .btn_detail {
        width: 229px;
        height: 70px;
        background: url('../../assets/img/btnbg.png') no-repeat top center;
        background-size: 100% 100%;
        cursor: pointer;
        border: none;
        outline: none;
        color: #004d91;
        font-size: 1.78rem;
        font-weight: 500;
    }
    .btn_ctitem2,
    .btn_ctitem3,
    .btn_ctitem4,
    .btn_ctitem5 {
        margin: 38px 0 60px 60%;
    }
    .detail_container {
        width: 100%;
        height: auto;
        min-height: calc(100% - 166px);
        // min-height: 1343px;
        background-size: cover;
        .langbox {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .btn_list {
                width: 51px;
                margin-top: 21px;
                margin-right: 30px;
            }
        }
        .tabbox {
            width: 632px;
            margin: 100px auto 0;
            .tab {
                width: 100%;
                ul {
                    display: flex;
                    justify-content: center;
                    align-items: flex-start;
                    li {
                        min-height: 54px;
                        padding: 12px 25px;
                        color: #004d91;
                        font-size: 2.14rem;
                        margin-right: 1px;
                        border-top-left-radius: 20px;
                        border-top-right-radius: 20px;
                        cursor: pointer;
                        background: #ffffff url('../../assets/img/bg.jpg') repeat;
                        background-size: 20px 20px;
                    }
                    li:first-child {
                        font-size: 1.7rem;
                        font-weight: 500;
                    }
                    .active {
                        background: #004f93;
                        color: #ffffff !important;
                    }
                }
            }
            .tabcontainer {
                position: relative;
                z-index: 2;
                width: 100%;
                margin-top: -5px;
                background: url('../../assets/img/bg.jpg') repeat;
                background-size: 20px 20px;
                padding: 10px 0;
                .ctitem {
                    position: relative;
                    width: 100%;
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: flex-start;
                    align-items: center;
                    .itemtitlebox {
                        width: 552px;
                        height: 36px;
                        text-align: right;
                        background: url('../../assets/img/titlebg.jpg') no-repeat bottom center;
                        background-size: 100% auto;
                        margin-top: 28px;
                        .itemtitle {
                            font-size: 2.14rem;
                            font-family: 'DOUYUfont';
                            color: #004d91;
                        }
                    }
                }
                .ctitem1 {
                    .btn_detail {
                        position: absolute;
                        bottom: -240px;
                        right: 0;
                        margin-top: 30px;
                    }
                }
            }
            .tabfoot {
                margin-top: -2px;
                width: 100%;
                height: 140px;
                img {
                    width: 100%;
                }
            }
        }
    }
}
</style>